import * as React from 'react';
import {forwardRef, useState} from 'react';
import './index.scss';


// 确保createElement可用
const { createElement } = React;

export interface HeadBarProps {
  /**
   * 左侧中文文字
   */
  chineseText?: string;

  /**
   * 中间英文文字
   */
  englishText?: string;

  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;

  /**
   * 主题样式
   */
  theme?: 'light' | 'dark';

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;
  iconUrl?: string; // 新增：可选icon图片地址

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const HeadBar = forwardRef<HTMLDivElement, HeadBarProps>((props, ref) => {
  const {
    title = '运营现状',
    noResponsiveScale = false,
    showTabs = false,
    tabs = [
      { id: '1', text: '当日', isActive: true },
      { id: '2', text: '近七日', isActive: false }
    ],
    theme = 'dark',
    plusIcon = '',
    onClick,
    style = {},
    className = '',
    iconUrl,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const handleClick = () => {
    if (onClick) {
      onClick();
    }
  };

  const classNames = [
    'hzdz-head-bar',
    className
  ].filter(Boolean).join(' ');


  return (
    <div
      ref={ref}
      className={classNames}
      {...otherProps}
    >
      <div className="head-round" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/point-icon-blue.png)'}} />
      <div className="head-title">{title}</div>
      <div className="head-line" />
      <div className="head-right" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/left-icon-blue.png)'}} />
      {plusIcon != '' && (
        <div className="plus-icon" style={{backgroundImage: `url(${plusIcon})`}} />
      )}
      {showTabs && (
        <div className="tab-selector">
          {tabs.map((tab, index) => (
            <div
              key={tab.id}
              className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
            >
              {tab.text}
            </div>
          ))}
        </div>
      )}
    </div>
  )
});

HeadBar.displayName = 'HeadBar';

export default HeadBar;
